<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>剪刀石头布</title>
</head>
<body>
    <div style="width: 400px; margin-top: 20px; margin-left: auto; margin-right: auto;" >
        <div id="content" style="height: 400px; border: 1px solid;"></div>
        <div style="margin-top: 10px;">
            <button id="scissors" value="scissors">剪刀</button>
            <button id="rock" value="rock">石头</button>
            <button id="paper" value="paper">布</button>
        </div>
    </div>
    <script>
        let buttons = [
            document.getElementById('scissors'),
            document.getElementById('rock'),
            document.getElementById('paper')
        ]
        for (let btn of buttons) {
            btn.addEventListener('click', function() {
                fetch("/action.do?name=" + btn.value)
                    .then(res => res.text())
                    .then(data => {
                        let content = document.getElementById('content')
                        content.innerHTML += data + '<br/>'
                    })
            })
        }
    </script>
</body>
</html>